import React from 'react'

// 引入底部
import Tabbar from '@/components/common/Tabbar.js'

const Index = () =>
{
    const [CollectNum,setCollectNum] = React.useState(0)
    const [LeaseNum,setLeaseNum] = React.useState(0)
    const [CategoryNum,setCategoryNum] = React.useState(0)
    // 设置登录后的状态
    const [LoginUser,setLoginUser] = React.useState(React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {})
    // let Login= React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {};
    // 钩子函数
    React.useEffect(()=>{
            GetUserInfo()
    },[])
    React.useEffect( () => {
        // console.log(React.$LoginUser)
        
    },[])

    // 初始化路由跳转对象
    const Navigate = React.$Router.useNavigate()

    // 头像
    const Avatar = () =>
    {
        if(LoginUser.avatar)
        {
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginUser.avatar_text} alt="" />
            )
        }else{
            return (
                <img id="Dfgrg" style={{ height: '1.1rem' }} src="/assets/images/toux.jpg" alt="" />
            )
        }
    }

    // 昵称
    const NickName = () =>
    {
        if(LoginUser.nickname)
        {
            return (
                <h2>{LoginUser.nickname}</h2>
            )
        }else{
            return (
                <h2>{LoginUser.mobile_text}</h2>
            )
        }
    }
    const GetUserInfo= async()=>{
        // let Login= React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {};
        // console.log(Login)
        // setLoginUser(Login);
        let result= await React.$Api.UserInfo({busid:LoginUser.id})
        if(result.code==1){
           setCollectNum(result.data.collectnum)
           setLeaseNum(result.data.leasenum)
           setCategoryNum(result.data.CategoryNum)
        }
     }
    // 邮箱认证
    const Email = () =>
    {
        if(LoginUser.auth != 1)
        {
            return (
                <div className="my_dind">
                    <div className="bt">
                        <React.$Router.NavLink to="/user/base/ems">
                            <h3><img src="/assets/images/my_x_01.png" />邮箱认证</h3>
                            <div className="right">
                                <img src="/assets/images/right_jiant.png" />
                            </div>
                        </React.$Router.NavLink>
                    </div>
                </div>
            )
        }
    }

    // 退出登录的方法
    const onLogout = () =>
    {
        React.$Vant.Dialog.confirm({
            title:'退出登录',
            message:'是否确认退出登录'
        }).then((res) => {
            React.$Cookie.remove('LoginUser')

            React.$LoginUser = {}
            setCollectNum(0)
            setLeaseNum(0)
            setCategoryNum(0)
            Navigate('/user/base/login')
            
        }).catch((err) => {
            
        });
    }


    return (
        <>
            <div className="my_kuang">
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <Avatar />
                        </div>
                        <div className="mingz">
                            <NickName />
                        </div>
                    </div>
                </div>
                <div className="div_bx_k">
                    <div className="neir_Ef">
                        <div className="yverjif">
                            <ul>
                                <li>
                                    <React.$Router.NavLink to='/user/base/collectcate'>
                                        <h2>{CategoryNum}</h2>
                                        <p>收藏文章</p>
                                    </React.$Router.NavLink>
                                </li>
                                <li>
                                    <React.$Router.NavLink to='/user/base/collection'>
                                        <h2>{CollectNum}</h2>
                                        <p>收藏商品</p>
                                    </React.$Router.NavLink >
                                </li>
                                <li>
                                    <React.$Router.NavLink to='/lease/lease/index'>
                                        <h2>{LeaseNum}</h2>
                                        <p>订单</p>
                                    </React.$Router.NavLink>
                                </li>
                            </ul>
                        </div>
                        <div className="list_index_my">
                            <div className="fenh_ziyek">
                                <h3>更多服务 </h3>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/user/base/profile">
                                        <h3>
                                            <img src="/assets/images/my_x_01.png" />
                                            基本资料
                                        </h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>
                            <Email />
                            <div className="my_dind">
                                <div className="bt">
                                    <a href="my_guan.html">
                                        <h3><img src="/assets/images/my_x_02.png" />关于我们</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <a onClick={onLogout}>
                                        <h3><img src="/assets/images/my_x_02.png" />退出登录</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" />
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div style={{ height: '.9rem' }}></div>
                    </div>
                </div>
            </div>

            <Tabbar />
        </>
    )
}

export default Index